<template>
    <div style="margin-top: 15px;">
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    sortable
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="90">
            </el-table-column>
            <el-table-column
                    prop="beginDate"
                    label="起始日期"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="endDate"
                    label="结束日期"
                    sortable
                    width="150">
            </el-table-column>
            <el-table-column
                    label="原因"
                    width="150">
                <template scope="scope">
                    <el-button type="text" v-if="scope.row" @click="open(scope.row)">查看原因</el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="假期状态"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="leader"
                    label="审核管理员"
                    width="150">
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
    export default {
        methods:{
            open(row) {
                this.$alert(this.tableData[row.id-1].reason, '请假原因', {confirmButtonText: '确定', callback: action => {}});
            }
        },
        data() {
            return {
                tableData: null
            }
        },
        created(){
            const _this = this
            this.$http.post("holiday/findByName",window.sessionStorage.getItem("name")).then(function(resp){
                _this.tableData=resp.data.data
            })
        }
    }
</script>

<style>
    .el-select .el-input {
        width: 130px;
    }
    .input-with-select .el-input-group__prepend {
        background-color: #fff;
    }
    .page{
        float: right;
    }
</style>